<template>
  <div>
    <div class="box">
      关爱信息
      <FormPanel ref="formPanel" :cols="4" :list="formList" formType="add" labelWidth="100" :isSubmitBtn="false" @formChange="formChangeHandle" />
    </div>

    <div v-if="showSms" class="box">
      短信发送
      <FormPanel ref="smsFormPanel" :cols="4" :list="smsFormList" formType="add" labelWidth="100" :isSubmitBtn="false" />
    </div>

    <!-- <div class="app-container box">
      <div class="form-row">
        <el-row>
          <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="关爱问卷" name="careQuestionnaire"> <careQuestionnaire ref="careQuestionnaire"/></el-tab-pane>
            <el-tab-pane label="关爱任务" name="careTask"><careTask ref="careTask"/></el-tab-pane>
            <el-tab-pane label="关爱记录" name="careHistory"><careHistory ref="careHistory"/></el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </div> -->

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button v-if="type !== 'show'" type="primary" @click="saveDialog">保存/发送</el-button>
    </div>
  </div>
</template>
<script>
import { getCareTaskListById, insertCustomerCare } from '@/api/customerRepair/customerCare/potentialCustomerBirthday2';
import { dictionary } from '@/utils/dictMixin';
import careQuestionnaire from '../../tabs/careQuestionnaire.vue';
import careTask from '../../tabs/careTask.vue';
import careHistory from '../../tabs/careHistory.vue';

export default {
  name: 'customerBirthdayDetail',
  components: {
    careQuestionnaire,
    careTask,
    careHistory
  },
  mixins: [dictionary],
  props: {
    type: String,
    selectedRows: Object
  },
  data() {
    return {
      formList: this.createFormList(),
      fetchAnswerParams: {},
      smsFormList: this.createSmsFormList(),
      activeName: 'careQuestionnaire',
      saveData: {},
      showSms: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.type != 'add') {
        // debugger;
        getCareTaskListById(this.selectedRows[0].careTargetId).then(res => {
          if (res.resultCode == 200) {
            this.formList.forEach(x => (x.initialValue = res.data[x.fieldName]));
            this.smsFormList.forEach(x => (x.initialValue = res.data[x.fieldName]));
          } else {
            this.$message.error('获取关爱明细失败');
          }
        });
      }
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '关爱名称',
          fieldName: 'careName',
          disabled: true,
          initialValue: '潜客生日关怀'
        },
        {
          type: 'SELECT',
          label: '关爱方式',
          fieldName: 'careWay',
          placeholder: '请选择',
          itemList: this.createDictList('1587'),
          rules: [{ required: true, message: '请选择关爱方式', trigger: 'blur' }],
          change: val => {
            if (val == 15871002) {
              this.showSms = true;
            } else {
              this.showSms = false;
            }
          }
        },
        {
          type: 'SELECT',
          label: '关爱状态',
          fieldName: 'careStatus',
          placeholder: '请选择',
          itemList: this.createDictList('1592'),
          rules: [{ required: true, message: '请选择关爱状态', trigger: 'blur' }],
          change: val => {
            if (val == 15921004) {
              this.formList[4].disabled = false;
            } else {
              this.formList[4].disabled = true;
              this.formList[4].initialValue = '';
            }
          }
        },
        {
          type: 'DATE',
          label: '下次关爱日期',
          fieldName: 'nextCareDate',
          placeholder: '请选择'
        },
        {
          type: 'SELECT',
          label: '失败原因',
          fieldName: 'careFailureReason',
          disabled: true,
          placeholder: '请选择',
          itemList: this.createDictList('1594')
        },
        {
          type: 'TEXT_AREA',
          label: '关爱内容',
          selfCols: 4,
          fieldName: 'careContent',
          placeholder: '关爱内容',
          rules: [{ required: true, message: '请输入关爱内容', trigger: 'blur' }]
        },
        {
          type: 'TEXT_AREA',
          label: '客户反馈',
          selfCols: 4,
          fieldName: 'customerFeedback',
          placeholder: '客户反馈'
        }
      ];
    },
    closeDialog(type) {
      this.$emit('close', false, type);
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    createSmsFormList() {
      return [
        {
          type: 'INPUT',
          label: '手机号',
          fieldName: 'mobilePhone',
          selfCols: 4,
          disabled: true,
          initialValue: ''
        },
        {
          type: 'RADIO',
          label: '发送方式',
          fieldName: 'field9',
          selfCols: 3,
          itemList: [
            { text: '按任务设定时间', value: 1 },
            { text: '即时发送', value: 2 }
          ]
        },
        {
          type: 'INPUT',
          label: '时间',
          fieldName: 'smsDaysAfterTask',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '发送短信内容',
          fieldName: 'smsTemplateContent',
          disabled: true,
          selfCols: 4
        }
      ];
    },
    saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData && this.saveData != null) {
        this.saveData.careName = '潜客生日关怀';
        let ids = '';
        this.selectedRows.forEach(row => {
          ids += row.careTargetId;
        });
        this.saveData.careTargetId = ids.substring(0, ids.length - 1);
        insertCustomerCare(this.saveData).then(res => {
          if (res.resultCode == 200) {
            this.closeDialog('refresh');
          } else {
            this.$message.error('保存失败');
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-form {
  width: 100%;
  margin: 0;
}

.el-checkbox-group .el-checkbox + .el-checkbox {
  margin: 0;
}

.box {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  margin-top: 20px;
}
</style>
